说明

本文转自菜鸟教程。

JQuery获取内容和属性

获得内容

三个简单实用的用于DOM操作的JQuery方法：

  • text()：设置或返回所选元素的文本内容
  • html()：设置或返回所选元素的内容（包括HTML标记）
  • val()：设置或返回表单字段的值

例如：

1
2
3
4
5
6
$("#btn1").click(function(){
  	alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  	alert("HTML: " + $("#test").html());
});

下面的例子是通过JQuery的val()方法获得输入字段的值：

1
2
3
$("#btn1").click(function(){
  	alert("值为: " + $("#test").val());
});

获取属性-attr()

JQuery attr()方法用于获取属性值，下面的例子为获得链接中href属性的值：

1
2
3
$("button").click(function(){
  	alert($("#runoob").attr("href"));
});

JQuery设置内容和属性

设置内容-text()、html()以及val()

  • text()：设置或返回所选元素的文本内容
  • html()：设置或返回所选元素的内容（包括HTML标记）
  • val()：设置或返回表单字段的值

例如：

1
2
3
4
5
6
7
8
9
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html()以及val()的回调函数

text()、html()以及val()均拥有回调函数，回调函数有两个参数：被选元素列表当中当前元素的下标以及原始的值，然后以函数新值返回您希望使用的字符串：

1
2
3
4
5
$("#btn1").click(function() {
  	$("#test1").text(function(i, origText) {
      	return "旧文本：" + origText + " 新文本：Hello World! (index: " + i + ")";
  	});
});

设置属性-attr()

attr()方法用于设置/改变属性值，例如：

1
2
3
$("button").click(function() {
  	$("#runoob").attr("href", "http://www.google.com");
});

attr()方法也可以同时设置多个属性，例如：

1
2
3
4
5
6
$("button").click(function() {
  	$("#runoob").attr({
		"href" : "http:www.google.com",
		"title": "JQuery"
	});
});

JQuery添加元素

append()

用于在被选元素的结尾插入内容，例如：

1
$("p").append("追加");

prepend()

在被选元素的开头插入内容，例如：

1
$("p").prepend("在开头追加");

通过append()和prepend()方法添加若干新元素

append()和prepend()方法能够通过参数无限数量的新元素，在下面的例子中，我们创建若干个元素，这些元素可以通过text/HTML、JQuery或者JavaScript/DOM来创建，然后通过append()方法把这些新元素追加到文本中：

1
2
3
4
5
6
7
8
function appendText() {
  	var text1 = "<p>文本。</p>"; // 使用HTML标签创建文本
	var text2 = $("<p></p>").text("文本。"); // 使用JQuery创建文本
	var text3 = document.createElement("p")
; // 使用DOM创建文本
	text3.innerHTML="文本";
	$("body").append(text1, text2, text3); // 追加新元素
}

after()和before()

after() 方法在被选元素之后插入内容，before() 方法在被选元素之前插入内容。

1
2
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

通过after()和before()方法添加若干新元素

after()和before()方法能够通过参数无限数量的新元素，在下面的例子中，我们创建若干个元素，这些元素可以通过text/HTML、JQuery或者JavaScript/DOM来创建，然后通过append()方法把这些新元素追加到文本中：

1
2
3
4
5
6
7
8
function appendText() {
  	var text1 = "<b>I </b>"; // 使用HTML标签创建文本
	var text2 = $("<i></i>").text("love "); // 使用JQuery创建文本
	var text3 = document.createElement("big")
; // 使用DOM创建文本
	text3.innerHTML="JQuery!";
	$("img").after(text1, text2, text3); // 追加新元素
}

after()、before()与append()、prepend()之间的区别

看下面的例子：

append:

1
2
3
4
5
6
<p>
  	<span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果如下：

1
2
3
4
<p>
  	<span class="s1">s1</span>
  	<span class="s2">s2</span>
</p>

而对于after：

1
2
3
4
5
6
<p>
  	<span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果如下：

1
2
3
4
<p>
  	<span class="s1">s1</span>
</p>
<span class="s2">s2</span>

可见两者的区别是：

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。

JQuery删除元素

如需删除元素和内容，有以下两个方法：

  • remove()：删除被选元素及其子元素
  • empty()：从被选元素中删除子元素

remove()

remove()方法删除被选元素及其子元素：

1
$("#div1").remove();

empty()

empty()方法删除被选元素的子元素：

1
$("#div1").empty();

过滤被删除的元素

remove()方法可以接收一个参数，允许对被删除元素进行过滤，该参数可以是任何JQuery选择器的语法，例如：

1
$("p").remove(".italic");

上面的例子用于删除class=”italic”的所有p元素。

JQuery获取并设置CSS类

  • addClass()：向被选元素添加一个或多个类
  • removeClass()：从被选元素删除一个或多个类
  • toggleClass()：对被选元素进行添加/删除类的切换操作
  • css()：设置或返回样式属性

实例样式表

1
2
3
4
5
6
7
.important {
  	font-weight: bold;
  	font-size: xx-large;
}
.blue {
  	color: blue;
}

addClass()

1
2
3
4
$("button").click(function() {
  	$("h1,h2,p").addClass("blue");
	$("div").addClass("important");
});

在上面的例子中，在添加类时可以同时选取多个元素，当然，也可以在addClass()方法中规定多个类：

1
2
3
$("button").click(function() {
  	$("body div:first").addClass("important blue");
});

removeClass()

1
2
3
$("button").click(function() {
  	$("h1,h2,p").removeClass("blue");
});

JQuery css()方法

css()方法用于返回或设置被选元素的一个或多个样式属性。

返回CSS属性

其语法格式如下：

1
css("propertyname");

看下面的这个例子：

1
$("p").css("background-color");

设置CSS属性

其语法格式如下：

1
css({"propertyname":"value", "propertyname":"value",...});

看下面这个例子：

1
$("p").css({"background-color":"yellow", "font-size":"200%"});

JQuery尺寸

通过JQuery可以很容易处理元素和浏览器窗口的尺寸，其常用方法有：

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

看下面这张图：

width()和height()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距），height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

1
2
3
4
5
$("button").click(function() {
  	var text = "";
	text += "div的宽度是：" + $("div1").width() + "<br/>";
	text += "div的高度时：" + $("div1").height();
});

innerWidth()和innerHeight()

innerWidth() 方法返回元素的宽度（包括内边距），innerHeight() 方法返回元素的高度（包括内边距）。

1
2
3
4
5
6
$("button").click(function(){
    var txt = "";
    txt += "div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt += "div 高度，包含内边距: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});

outerWidth()和outerHeight()

outerWidth() 方法返回元素的宽度（包括内边距和边框），outerHeight() 方法返回元素的高度（包括内边距和边框）。

1
2
3
4
5
6
$("button").click(function(){
    var txt = "";
    txt += "div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
    txt += "div 高度，包含内边距和边框: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});